<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">

    <el-descriptions class="margin-top"  :column="3"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          活动名称
        </template>
        {{form.promotionName}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          活动开始时间
        </template>
        {{form.startTime}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          报名截止时间
        </template>
        {{form.applyEndTime}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          场次
        </template>
        <el-tag
          :key="tag.time"
          v-for="tag in hours"
          :disable-transitions="false"
          style="margin-right: 10px">
          {{tag.time}}
        </el-tag>
      </el-descriptions-item>

    </el-descriptions>

    <el-button type="primary" style="margin: 10px 0px" @click="openSkuList">选择商品</el-button>
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <el-tab-pane  v-for="tag in hours" :label="tag.time" :name="tag.time">

        <el-table v-loading="loading" :data="seckillApplyList" @selection-change="handleGoodsSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="商品名称" align="center" prop="goodsName" />
          <el-table-column label="商品价格" align="center" prop="originalPrice" />
          <el-table-column label="库存" align="center" prop="quantity" >
            <template slot-scope="scope">
              <el-input
                type="number"
                placeholder="请输入活动库存"
                v-model="scope.row.quantity"
                min="1"
                max="100"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="活动价格" align="center" prop="price" >
            <template slot-scope="scope">
              <el-input
                type="number"
                placeholder="请输入活动价格"
                v-model="scope.row.price"
                min="1"
                max="100"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="promotionApplyStatus" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mall_seckill_apply_state" :value="scope.row.promotionApplyStatus"/>
            </template>

          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="delGoods(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>



    <div slot="footer" class="dialog-footer" style="margin-top: 20px">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>



    <!--  商品选择   -->
    <el-dialog title="商品选择" :visible.sync="goodsopen" v-if="goodsopen" width="65%" append-to-body>
      <goods-dialog :selectedWay="selectedWay" @selectedGoodsData="selectedGoodsData" @closeGoodsData="closeGoodsData"></goods-dialog>
    </el-dialog>


  </div>
</template>

<script>
import { getSeckill} from "@/api/mall/promotion/seckill";
import {  listSekillApplyAll,addSeckillApply} from "@/api/mall/promotion/seckill-apply";
import GoodsDialog from '@/views/mall/components/lili-dialog/goods-dialog'
export default {
  name: "MallSeckillGoods",
  dicts: ['mall_seckill_apply_state'],
  components: {
    GoodsDialog
  },
  props: {
    seckillId: {
      type: String
    }
  },
  data() {
    return {
      activeName: "",
      goodsopen: false,
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
        promotionName: '',
        applyEndTime: '',
        startTime: '',
        seckillRule: '',
        hours: '',
      },
      id: null,
      hours: [],
      seckillApplyList: [],
      // 查询参数
      queryParams: {
        seckillId: this.seckillId,
        timeLine: this.activeName,
      },
      selectedGoods: [],
      selectedWay: []
    };
  },
  created() {
      this._getSeckill()
  },
  methods: {
    /** 查询秒杀信息 */
    _getSeckill() {
      getSeckill(this.seckillId).then(response => {
        this.form = response.data
        let hours = this.form.hours;
        this.hours = []
        if (hours && hours.length > 0) {
          let hourArr = this.form.hours.split(",");
          for (let i = 0; i < hourArr.length; i++) {
            let hour = hourArr[i];
            let item = {
              "time": hour
            }
            this.hours.push(item)
          }

        }
        this.activeName = this.hours[0].time
        this.queryParams.timeLine = this.activeName
        this._listSeckillApply()
      })
    },

    /** 查询秒杀信息 */
    _listSeckillApply() {
      this.seckillApplyList = []
      listSekillApplyAll(this.queryParams).then(response => {
        this.seckillApplyList = response.data;
        this.loading = false;
      })
    },

    /** 提交按钮 */
    submitForm() {
      let data = {
        seckillId: this.seckillId,
        timeLine: this.activeName,
        applyList: this.seckillApplyList
      }
      addSeckillApply(data).then(response => {
        this.$modal.msgSuccess("新增成功");
        this._listSeckillApply()
      });
    },


    openSkuList() {
      // 显示商品选择器
      let data = JSON.parse(JSON.stringify(this.seckillApplyList));
      data.forEach((e) => {
        e.id = e.skuId;
      });
      this.selectedWay = data
      this.goodsopen = true;

    },

    cancel() {
      this.$emit("emitSeckillCancel");
    },

    handleClose(tag) {
      this.hours.splice(this.hours.indexOf(tag), 1);
    },

    handleTabClick(tab, event) {
      // console.log(tab.label);
      this.queryParams.timeLine = tab.label
      this._listSeckillApply()
    },
    selectedGoodsData(item) {
      // 回显已选商品
      let list = [];
      item.forEach((e) => {
        list.push({
          goodsName: e.goodsName,
          price: e.price,
          originalPrice: e.price,
          promotionApplyStatus: e.promotionApplyStatus || "APPLY",
          quantity: e.quantity,
          seckillId: this.seckillId,
          storeId: e.storeId,
          storeName: e.storeName,
          skuId: e.id,
          timeLine: this.activeName
        });
      });
      this.seckillApplyList = list;
      this.goodsopen = false
      // console.log(JSON.stringify(this.seckillApplyList))
    },
    closeGoodsData(){
      this.goodsopen = false
    },
    handleGoodsSelectionChange(selection){
      this.selectedGoods = selection
    },
    delGoods(index) {
      // 删除商品
      this.seckillApplyList.splice(index, 1);
    },
  }
};
</script>
